<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2025-09-22 16:08:36
 * @Description: 减灾中心外聘人员信息管理系统(只读版本) - 使用独立统计卡片组件
 -->
 <template>
  <div class="personnel-container" :style="{ height: view.height-142 + 'px' }">
    <!-- 头部区域 -->
    <div class="header-section">
      <div class="page-title">
        <el-icon class="title-icon" size="24">
          <OfficeBuilding />
        </el-icon>
        <span>减灾中心外聘人员信息管理</span>
      </div>
      
      <div class="header-actions">
        <el-input
          v-model="searchText"
          placeholder="搜索姓名、部门、性质或毕业院校..."
          style="width: 300px;"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
    </div>

    <!-- 统计卡片组件 -->
    <PersonnelStatsCards 
      :total-count="totalCount"
      :personnel-data="personnelList"
      :loading="loading"
      @card-click="handleStatsCardClick"
      @time-range-change="handleTimeRangeChange"
    />

    <!-- 数据表格 -->
    <div class="table-section">
      <el-card shadow="never">
        <template #header>
          <div class="table-header">
            <div class="table-title">
              <el-icon><Grid /></el-icon>
              <span>人员详细信息</span>
            </div>
            <div class="table-actions">
              <el-button type="primary" :icon="Download" size="small">
                导出数据
              </el-button>
              <el-button type="success" :icon="Refresh" size="small" @click="loadPersonnelData">
                刷新数据
              </el-button>
            </div>
          </div>
        </template>
        
        <el-table 
          :data="filteredPersonnel" 
          style="width: 100%"
          row-key="index"
          v-loading="loading"
          element-loading-text="加载中..."
          empty-text="暂无数据"
          :height="tableHeight"
        >
          <el-table-column prop="name" label="姓名" width="200">
            <template #default="{ row }">
              <div class="name-cell">
                <el-avatar :size="32" class="name-avatar">
                  {{ row.name.charAt(0) }}
                </el-avatar>
                <div class="name-info">
                  <div class="name-text">{{ row.name }}</div>
                  <div class="name-desc">{{ row.gender }}</div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="department" label="所属部门" width="200">
            <template #default="{ row }">
              <div class="department-cell">
                <div class="department-name">{{ row.department }}</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="personnelNature" label="人员性质" width="120">
            <template #default="{ row }">
              <el-tag 
                :type="getPersonnelNatureType(row.personnelNature)" 
                size="small"
                class="nature-tag"
              >
                {{ row.personnelNature }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="education" label="学历学位" width="180">
            <template #default="{ row }">
              <div class="education-cell">
                <div class="education-level">{{ row.education }}</div>
                <div class="degree-info">{{ row.degree || '无学位' }}</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="graduatedFrom" label="毕业院校" width="200">
            <template #default="{ row }">
              <div class="school-cell">
                <div class="school-name">{{ row.graduatedFrom }}</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="workLocation" label="工作地点" width="150">
            <template #default="{ row }">
              <el-tag 
                :type="getLocationTag(row.workLocation)" 
                size="small"
              >
                {{ row.workLocation }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="entryDate" label="入职时间" width="120">
            <template #default="{ row }">
              <div class="date-cell">
                <el-icon><Calendar /></el-icon>
                <span>{{ row.entryDate }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="contractPeriod" label="合同期限" width="200">
            <template #default="{ row }">
              <div class="contract-cell">
                <div class="contract-start">开始：{{ row.contractStartDate }}</div>
                <div class="contract-end">结束：{{ row.contractEndDate }}</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="workContent" label="工作内容" min-width="300">
            <template #default="{ row }">
              <div class="work-content">
                <div class="content-text" :title="row.workContent">
                  {{ truncateText(row.workContent, 100) }}
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  Search,
  Calendar,
  OfficeBuilding,
  Grid,
  Download,
  Refresh
} from '@element-plus/icons-vue';

// 导入统计卡片组件
import PersonnelStatsCards from './PersonnelStatsCards.vue';

// 人员信息接口定义
interface PersonnelInfo {
  index: number;
  personnelCategory: string;
  department: string;
  name: string;
  gender: string;
  education: string;
  degree: string;
  graduatedFrom: string;
  personnelNature: string;
  workContent: string;
  workLocation: string;
  entryDate: string;
  contractStartDate: string;
  contractEndDate: string;
}

onMounted(() => {
  loadPersonnelData();
});

var view = reactive({
  height: window.innerHeight,
});

// 响应式数据
const searchText = ref<string>('');
const loading = ref<boolean>(false);

// 人员数据
const personnelList = ref<PersonnelInfo[]>([]);

// 计算属性
const filteredPersonnel = computed(() => {
  if (!searchText.value) return personnelList.value;
  
  return personnelList.value.filter(person => 
    person.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
    person.department.toLowerCase().includes(searchText.value.toLowerCase()) ||
    person.personnelNature.toLowerCase().includes(searchText.value.toLowerCase()) ||
    person.graduatedFrom.toLowerCase().includes(searchText.value.toLowerCase())
  );
});

const totalCount = computed(() => personnelList.value.length);

const tableHeight = computed(() => {
  return view.height - 420; // 调整表格高度以适应统计卡片组件
});

// 方法
const loadPersonnelData = () => {
  loading.value = true;
  
  setTimeout(() => {
    const rawData = [
      [
        "index", 1,
        "personnelCategory", "劳务派遣人员",
        "department", "中心综合办公室",
        "name", "安易",
        "gender", "女",
        "education", "大学本科",
        "degree", "学士学位",
        "graduatedFrom", "美国俄勒冈大学",
        "personnelNature", "业务秘书",
        "workContent", "研究生院相关工作，科普宣传",
        "workLocation", "中国水科院",
        "entryDate", "2024-09-01",
        "contractStartDate", "2024-06-01",
        "contractEndDate", "2026-05-31"
      ],
      [
        "index", 2,
        "personnelCategory", "劳务派遣人员",
        "department", "中心综合办公室",
        "name", "费添",
        "gender", "女",
        "education", "大学本科",
        "degree", "学士学位",
        "graduatedFrom", "安徽农业大学",
        "personnelNature", "业务秘书",
        "workContent", "主要负责日常收发文处理、党建相关工作，协助中心会务安排，以及领导安排的其他工作。",
        "workLocation", "中国水科院",
        "entryDate", "2024-09-15",
        "contractStartDate", "2024-08-01",
        "contractEndDate", "2026-07-31"
      ],
      [
        "index", 3,
        "personnelCategory", "劳务派遣人员",
        "department", "减灾所工程部",
        "name", "严杰",
        "gender", "女",
        "education", "大学本科",
        "degree", "学士学位",
        "graduatedFrom", "临沂大学",
        "personnelNature", "科研助理",
        "workContent", "进行山东省小型水库雨水工情自动测报和水库安全运行及防洪调度项目（包9）的1763座小水库及143条河流的验收准备工作和汇交材料。为小型水库雨水工情自动测报和水库安全运行及防洪调度项目其他项目组提供技术支持。",
        "workLocation", "外地驻场",
        "entryDate", "2022-06-01",
        "contractStartDate", "2024-06-01",
        "contractEndDate", "2026-05-31"
      ],
      [
        "index", 4,
        "personnelCategory", "劳务派遣人员",
        "department", "减灾所抗旱部",
        "name", "梁尹超",
        "gender", "女",
        "education", "大学本科",
        "degree", "学士学位",
        "graduatedFrom", "中国石油大学（华东）",
        "personnelNature", "业务秘书",
        "workContent", "事务性工作，主要负责部门项目招投标标书内的商务类收集与编写、项目申报与合同的申请、甲乙双方单位的对接工作，专利、软著、报奖、院章等的申请并盖章；财务报销核对与填报、项目支付进度的督促和结算。协助完成项目任务书、实施方案、工作报告、验收申请及技术报告撰写，项目初验材料打印、核对及盖章等。部门招收学生和联合培养学生的劳务签订等事宜，项目材料归档、部门工会奖品发放、会议材料的收纳以及快递的收发等。",
        "workLocation", "中国水科院",
        "entryDate", "2013-10-01",
        "contractStartDate", "2023-10-02",
        "contractEndDate", "2025-10-01"
      ],
      [
        "index", 5,
        "personnelCategory", "劳务派遣人员",
        "department", "减灾所工程部",
        "name", "张珊",
        "gender", "女",
        "education", "大学本科",
        "degree", "学士学位",
        "graduatedFrom", "邢台学院",
        "personnelNature", "业务秘书",
        "workContent", "主要负责项目管理、财务管理、审计方面工作，项目管理方面包括项目投标、合同签订、项目实施、验收及归档、外协合同前期材料准备及合同签订、管理、验收等工作，财务管理方面包括职工差旅、会议等报销以及筹备会议、报奖、专利软著申请等工作。审计方面包括根据审计要求统计项目材料，走流程盖章等工作。另外负责部门统计工作，包括院内通知、中心通知等汇总工作。",
        "workLocation", "中国水科院",
        "entryDate", "2022-11-01",
        "contractStartDate", "2024-11-01",
        "contractEndDate", "2026-10-31"
      ],
      [
        "index", 6,
        "personnelCategory", "劳务派遣人员",
        "department", "减灾所洪管部",
        "name", "常晓艳",
        "gender", "女",
        "education", "大学专科",
        "degree", "",
        "graduatedFrom", "河南安阳职业学院",
        "personnelNature", "业务秘书",
        "workContent", "主要负责主合同和外协合同的签定、经费收支开票，合同验收；配合召开项目各种会议的召开及报销；负责部门同事日常费用及差旅的报销填报工作，购买办公用品；部分纵向项目的预算编制；投标项目的标书制作。配合上级部门做好各项检查、审计、各种表格的填报，项目归档工作等。",
        "workLocation", "中国水科院",
        "entryDate", "2022-04-01",
        "contractStartDate", "2024-04-01",
        "contractEndDate", "2026-03-31"
      ],
      [
        "index", 7,
        "personnelCategory", "劳务派遣人员",
        "department", "减灾所工程部",
        "name", "田相彩",
        "gender", "女",
        "education", "大学本科",
        "degree", "学士学位",
        "graduatedFrom", "北京工商大学",
        "personnelNature", "科研助理",
        "workContent", "主要从事水土保持与山洪灾害防治相关工作。参与了水利部生产建设项目水土保持监管遥感解译与判别项目的遥感解译、合规性判读、成果数据分析、项目总结报告等工作，参与了陕西省2024、2025年度山洪灾害防治项目的投标、平台测试、项目周报日报、成果报告的撰写等工作，整理了往年陕西项目的相关资料及归档工作，此外参与了山洪气象预警值班、智能解译等工作。",
        "workLocation", "中国水科院",
        "entryDate", "2024-04-01",
        "contractStartDate", "2024-04-01",
        "contractEndDate", "2026-03-31"
      ],
      [
        "index", 8,
        "personnelCategory", "劳务派遣人员",
        "department", "减灾所技术部",
        "name", "付雪",
        "gender", "女",
        "education", "大学本科",
        "degree", "学士学位",
        "graduatedFrom", "北京科技大学",
        "personnelNature", "业务秘书",
        "workContent", "(1)财务报销：填单、制单、签字、送单等工作。\n(2)会议组织：负责组织内部或外部学术、技术等类型会议；专家接待；会议纪要。\n(3)投标工作：负责商务标书撰写等招投标工作。\n(4)团队管理：协助团队项目和人员管理，如归档、内审、考勤记录等工作。\n(5)其他工作：团队交办的其他任务。",
        "workLocation", "中国水科院D座231",
        "entryDate", "2024-10-01",
        "contractStartDate", "2024-10-01",
        "contractEndDate", "2026-09-30"
      ]
    ];

    personnelList.value = rawData.map(arr => {
      const obj: any = {};
      for (let i = 0; i < arr.length; i += 2) {
        obj[arr[i]] = arr[i + 1];
      }
      return obj as PersonnelInfo;
    });

    loading.value = false;
    ElMessage.success('数据加载完成');
  }, 1000);
};

// 统计卡片事件处理
const handleStatsCardClick = (type: string) => {
  console.log('点击统计卡片:', type);
  ElMessage.info(`查看${type === 'total' ? '总人数' : type === 'increase' ? '新增人员' : '减少人员'}详情`);
  // 这里可以实现跳转到详细页面或弹出详情对话框
};

const handleTimeRangeChange = (type: string, range: string) => {
  console.log('时间范围变更:', type, range);
  ElMessage.success(`已切换到${range === 'week' ? '周度' : range === 'month' ? '月度' : '年度'}统计`);
  // 这里可以触发数据重新计算
};

const getPersonnelNatureType = (nature: string) => {
  const natureMap: Record<string, string> = {
    '业务秘书': 'primary',
    '科研助理': 'success'
  };
  return natureMap[nature] || 'info';
};

const getLocationTag = (location: string) => {
  if (location.includes('外地')) return 'warning';
  if (location.includes('中国水科院')) return 'success';
  return 'info';
};

const truncateText = (text: string, maxLength: number) => {
  if (text.length <= maxLength) return text;
  return text.substring(0, maxLength) + '...';
};
</script>

<style lang="scss" scoped>
.personnel-container {
  padding: 0 20px;
  background-color: #f5f7fa;
  overflow: auto;
}

.header-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;

  .page-title {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    color: #000fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    
    .title-icon {
      margin-right: 12px;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
}

.table-section {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .table-title {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      color: #2c3e50;
      
      .el-icon {
        margin-right: 8px;
        color: #409eff;
      }
    }
    
    .table-actions {
      display: flex;
      gap: 8px;
    }
  }
}

// 表格样式
.name-cell {
  display: flex;
  align-items: center;
  
  .name-avatar {
    margin-right: 12px;
    background: linear-gradient(45deg, #409eff, #67c23a);
  }
  
  .name-info {
    .name-text {
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .name-desc {
      font-size: 12px;
      color: #909399;
    }
  }
}

.department-cell {
  .department-name {
    font-weight: 500;
    color: #303133;
  }
}

.education-cell {
  .education-level {
    font-weight: 500;
    margin-bottom: 4px;
  }
  
  .degree-info {
    font-size: 12px;
    color: #909399;
  }
}

.school-cell {
  .school-name {
    font-weight: 500;
    color: #303133;
  }
}

.date-cell {
  display: flex;
  align-items: center;
  font-size: 13px;
  
  :deep(.el-icon) {
    margin-right: 6px;
    color: #909399;
  }
}

.contract-cell {
  .contract-start, .contract-end {
    font-size: 12px;
    margin-bottom: 2px;
  }
  
  .contract-start {
    color: #67c23a;
  }
  
  .contract-end {
    color: #e6a23c;
  }
}

.work-content {
  .content-text {
    line-height: 1.4;
    color: #606266;
    cursor: pointer;
    
    &:hover {
      color: #409eff;
    }
  }
}

.nature-tag, .status-tag {
  font-weight: 500;
}

// 响应式样式
@media (max-width: 768px) {
  .personnel-container {
    padding: 10px;
  }
  
  .header-section {
    flex-direction: column;
    align-items: stretch;
    
    .header-actions {
      justify-content: center;
    }
  }
  
  .table-header {
    flex-direction: column;
    gap: 12px;
    
    .table-actions {
      justify-content: center;
    }
  }
}
</style>

<style lang="scss">
// 全局样式覆盖
.personnel-container {
  .el-card__body {
    padding: 16px;
  }
  
  .el-table {
    .el-table__body-wrapper {
      scrollbar-width: thin;
      scrollbar-color: #ddd transparent;
      
      &::-webkit-scrollbar {
        height: 6px;
        width: 6px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 3px;
      }
    }
  }
  
  // 优化输入框样式
  .el-input {
    .el-input__wrapper {
      border-radius: 8px;
      background-color: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      
      &:hover, &.is-focus {
        border-color: rgba(255, 255, 255, 0.6);
        background-color: rgba(255, 255, 255, 0.95);
      }
      
      .el-input__inner {
        color: #2c3e50;
        
        &::placeholder {
          color: rgba(44, 62, 80, 0.6);
        }
      }
    }
  }
}
</style>